<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init()
			
			
			mui.plusReady(function(){
				// 获取存储的用户信息
				var user = util.getUser();
				
				// 渲染页面
				document.getElementById('username').innerText = user.nickname;
				document.getElementById('account').innerText = user.account;
																
				if (user.miniAvatar != null) {
					document.getElementById("showMaxHead").src = user.miniAvatar;
				}
				//相册选择
				document.getElementById("select_picture").addEventListener("tap",function(){
				
					plus.gallery.pick(function(path){
						// 1.创建一个上传任务对象
						var task = plus.uploader.createUpload( api.upload, 
								{},
								function ( t, status ) {
									var resp = JSON.parse(t.responseText)
									// 上传完成
									if(resp.code == 200 && resp.httpCode == 200){
										var maxHead = resp.data.url;
										var minHead = resp.data.thumbnail_url;
										
										//显示更新后的头像
										document.getElementById("showMaxHead").src = maxHead;
										
										//修改保存本机中的用户信息
										var oldUser = util.getUser();
										var update = util.ajax({
											url: api.userInfo(oldUser.id),
											success: function(data) {
												if (data.code == 200 && data.httpCode == 200) {
													// 把用户对象保存到本机的数据库
													var user = data.data;
													util.setUser(user);
												
													// 渲染页面
													document.getElementById('username').innerText = user.nickname;
													document.getElementById('account').innerText = user.account;
												
													if (user.miniAvatar != null) {
														document.getElementById("showMaxHead").src = user.miniAvatar;
													}
												}
											}
										});
										
										mui.back();
										
										//指定调用某个页面的某个函数 用于更新其他页面头像
										plus.webview.getWebviewById("me.html").evalJS("uploadAvatar()");
										
										
									} else {
										plus.nativeUI.toast('上传失败')
									}
								}
							);
						// 2.添加上传的文件
						task.addFile( path, {key:"file"} );
						// 3.设置其他参数
						task.addData( "userId", user.id+"" );
						// 4.上传
						task.start();
						plus.nativeUI.toast('更换成功');
					},function(e){
						mui.back();
					},{filter:"image",crop:{width:'360px',height:'360px',quality:100,resize:false}});
				})
			})
		</script>
		<script type="text/javascript">
			// 扩展API加载完毕后调用onPlusReady回调函数 
			document.addEventListener( "plusready", onPlusReady, false );
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function onPlusReady() {
				console.log("plusready");
			}
			// 拍照
			function captureImage(){
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: "+res+", Format: "+fmt);
				cmr.captureImage( function( path ){
						alert( "Capture image success: " + path );
					},
					function( error ) {
						alert( "Capture image failed: " + error.message );
					},
					{resolution:res,format:fmt}
				);
			}
		</script>

	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		
		<ul class="mui-table-view" style="margin-top: 45px;line-height: 50px;" >
			<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
				<!-- 可选择菜单 -->
				<ul class="mui-table-view">
				  <li class="mui-table-view-cell">
					<a href="#" id="select_picture">从相册选择</a>
				  </li>
				  <li class="mui-table-view-cell">
					<a href="#" id="camera" onclick="captureImage()">拍照</a>
				  </li>
				</ul>
				<!-- 取消菜单 -->
				<ul class="mui-table-view">
				  <li class="mui-table-view-cell">
					<a href="#sheet"><b>取消</b></a>
				  </li>
				</ul>
			</div>
			<li class="mui-table-view-cell">
				<a href="#sheet"  class="mui-navigate-right" style="display: flex;line-height: 50px;justify-content: space-between;">
					<label>头像</label>
					<img id="showMaxHead" class="mui-media-object mui-pull-right" src="">
				</a>
			</li>
		</ul> 
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right" style="display: flex;justify-content: space-between;">
					<label>名字</label>
					<label style="margin-right: 25px;color: #666;" id="username"></label>
				</a>
			</li>
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">拍一拍</a>
			</li>
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right" style="display: flex;justify-content: space-between;">
					<label>微信号</label>
					<label style="margin-right: 25px;color: #666;" id="account"></label>
				</a>
			</li> 
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">二维码名片</a>
			</li>
			<li class="mui-table-view-cell">
				<a class="mui-navigate-right">更多信息</a>
			</li>
		</ul>
			<ul class="mui-table-view" style="margin-top: 10px;">
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right">来电铃声</a>
			    </li>
			</ul> 
		</ul>
		</ul>
			<ul class="mui-table-view" style="margin-top: 10px;">
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right">微信豆</a>
			    </li>
			</ul> 
		</ul>
		</ul>
			<ul class="mui-table-view" style="margin-top: 10px;">
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right">我的地址</a>
			    </li>
			</ul> 
		</ul>
	</body>

</html>
	
	<style>
		ul li{
			padding: 10px; 
			line-height: 30px;
		}
		img{
			margin-right: 25px;
			border-radius: 30%;
			width: 50px;
			height: 50px;
			background-color: #000000;
		}
		body{
			font-size: 15px;
		}
	</style>